import './index.css';

// react
import React,{ useState } from 'react';
import {Route,Switch} from 'react-router-dom';

// antd
import { Layout,Button } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,

} from '@ant-design/icons';

// 路由
import {routes} from '../../router/index';

// state store
import { useDispatch } from 'react-redux';

// 自定义界面和组件
import {MyMenu} from '../../components/menu';

const { Header, Sider, Content } = Layout;





export default function Main() {

    const [collapsed,setCollapsed] = useState(false); // 侧边栏按钮状态
    const dispatch = useDispatch();
    const toggle = function() {
    setCollapsed(!collapsed);
    }

    const logout = function() {
        
        window.localStorage.removeItem('openId');
        dispatch({type:'LOGOUT'})
    }
    return (

        <Layout className="app">
            {/* 侧边导航栏 */}
            <Sider trigger={null} collapsible collapsed={collapsed} className="app_sider">
            
            <div className="sider_logocontainer">
                <div className="sider_logoimg" >火锅国大侠</div>
            </div>
            
            <MyMenu routes={routes} /> 

            </Sider>

            {/* 右侧主体 */}
            <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: 0 }}>

                <div className="header" >
                {/* 使用react 提供的api构建 react 组件 */}
                {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                    className: 'trigger',
                    onClick: toggle,
                })}

                <div className="header_menu" >
                    
                    
                </div>
                
                <div className="header_logout" >
                    <Button type="default" shape="round" onClick={logout}>Logout</Button>
                </div>
                </div>

            </Header>
            
            <Content
                className="site-layout-background"
                style={{
                margin: '24px 16px',
                padding: 24,
                minHeight: 280,
                }}
            >
                {/* content */}
                <Switch>

                {
                    routes.map(item => {
                    return (
                        <Route exact path={item.path} component={item.component} key={item.id} />
                    )
                    })
                }
                
                </Switch>

            </Content>
            </Layout>
        </Layout>

        
    );
}